<template>
  <view class="home">
    <view class="fix">
      <top-status></top-status>
      <view class="tabs wap">
        <!-- <view class="city" @click="toSelectCity">
					<uni-icons type="location-filled" size="16" color="#000"></uni-icons>
					<view class="link-1">
						<text class="linkcity">{{ city || "全国" }}</text>
					</view>
					<uni-icons type="bottom" size="16" color="#333333"></uni-icons>
				</view> -->
        <view class="city" @click="switchSport">
          <!-- https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1717147374704590.png -->
          <image class="hlogo"
            :src="showSearch ? 'https://wavestation.oss-cn-shenzhen.aliyuncs.com/upload/17181133187691453.png' : 'https://wavestation.oss-cn-shenzhen.aliyuncs.com/upload/171811334492722.png'"
            mode="widthFix"></image>
        </view>
        <!-- <image class="img2"> -->
        <!-- <view class="tab1" :class="{'tab4':tabInd == 0}" @click="tabInd =0">组局</view> -->
        <view class="tab1" v-for="(item, index) in tabList" :key="index" :class="{ tab4: tabInd == item.key }"
          @click="onClickTab(item.key)">
          {{ item.title }}
          <!-- <view v-if="tabInd == item.key" class="aft4"></view> -->
        </view>
      </view>
      <view class="topBox">
        <scroll-view style="white-space: nowrap; width: 52%" :scroll-x="true" :show-scrollbar="true" scroll-left="0"
          @scroll="whetherend">
          <view class="nav_">
            <view :class="[
              'nav_item',
              navIndex == index ? 'nav_active' : 'nav_text',
            ]" v-for="(item, index) in nav" :key="item.ID" @click="sel_tab(index)">
              {{ item.Name }}
            </view>
          </view>
        </scroll-view>
        <view class="topFastBtn" @click="goMessage">
          <image src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/community/20240521151732.png" mode="widthFix" />
          <view class="topFastText">极速处理</view>
          <view class="topFastNum" v-if="fastNum != '0'">{{ fastNum }}</view>
        </view>
        <!-- <view class="puadd" @click="publish(tabInd)">
          <image class="releaseimg" src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1716545108243136.png"
            mode="widthFix">
          </image>
          <view class="putitle">发布</view>
        </view> -->
      </view>
      <!-- 用于计算高度的隐藏复制品 star -->
      <view class="screenBox fakeBox">
        <view class="searchCell">
          <view class="scIcon">
            <uni-icons type="search" size="26"></uni-icons>
          </view>
          <view class="scInp">
            <input type="text" v-model="searchContent" placeholder="请输入搜索内容" maxlength="25" />
          </view>
          <view class="scBtnBox">
            <view class="scSumBtn">搜索</view>
            <view class="scSumBtn">重置</view>
          </view>
        </view>
        <view class="tagBox">
          <view class="tagList">
            <view class="tagCell" :class="{ tagIng: item.choose }" v-for="(item) in SportTypeList" :key="item.id">
              {{ item.code }}
            </view>
          </view>
        </view>
      </view>
      <!-- 用于计算高度的隐藏复制品 end -->
      <view class="screenBox" :style="{ 'height': showSearch ? searchHeight + 'px' : '0' }">
        <view class="searchCell">
          <view class="scIcon">
            <uni-icons type="search" size="26"></uni-icons>
          </view>
          <view class="scInp">
            <input type="text" v-model="searchContent" placeholder="请输入搜索内容" maxlength="25" />
          </view>
          <view class="scBtnBox">
            <view class="scSumBtn" @click="subSearch">搜索</view>
            <view class="scSumBtn" @click="resetSearch">重置</view>
          </view>
        </view>
        <view class="tagBox">
          <view class="tagList">
            <view class="tagCell" :class="{ tagIng: item.choose }" v-for="(item, index) in SportTypeList" :key="item.id"
              @click="chooseSport(index)">
              {{ item.code }}
            </view>
          </view>
        </view>
      </view>
    </view>

    <view class="card">
      <view class="load" v-if="!load">
        <u-loading-icon mode="circle" inactive-color="#fff" text="正在加载..." vertical></u-loading-icon>
      </view>
      <block v-else>
        <x-scroll :fixed="true" isNav @onRefresh="onRefresh" @scrolltolower="scrolltolower" :refresh="true">
          <view class="container">
            <swiper class="swiper" :autoplay="true" circular>
              <swiper-item v-for="item in bannerList" :key="item.ID">
                <view class="bannerImageBox" @click="gotobanner(item)">
                  <image class="adverimg" :src="item.Banner" mode="widthFix"></image>
                </view>
              </swiper-item>
            </swiper>
          </view>
          <view class="listBox" v-if="Array.isArray(list) && list.length > 0">
            <!-- 打水印案例 -->
            <!-- <image style="width: 100%;" :src="'https://wavestation.oss-cn-shenzhen.aliyuncs.com/upload/1718785980484592.png'+ossWatermark" mode="widthFix"></image> -->
            <block v-for="item in list" :key="item.ID">
              <!-- 一起挥组件 -->
              <huiCell :item="item" :tabInd="tabInd" :ossWatermark="ossWatermark"></huiCell>
            </block>
            <view class="blank_space_view"></view>
          </view>
          <block v-else>
            <u-empty mode="list" width="64" height="64" :icon="ossPath + '/upload/1715243724251737.png'" :show="true"
              iconSize="32" text="暂无数据"></u-empty>
          </block>
        </x-scroll>
      </block>
    </view>

    <view class="registerbox" v-if="showsign == 0">
      <image class="regimg" src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1716357264556509.png"
        mode="widthFix">
      </image>
      <view>
        <view class="regtitle_1">欢迎来到挥友圈</view>
        <view class="regtitle_2">赶紧注册来认识更多挥友吧</view>
      </view>
      <view class="regbtn" @click="nav_to('/pages/start/start2')">注册领好礼</view>
    </view>
    <!-- 优惠卷弹窗 -->
    <!-- <view v-if="iscoupon || isreceive" class="couponbox">
			<view style="width: 90%;position: absolute;top: 62%;left: 50%;transform:translate(-50%,-50%)">
				<image class="titleh1" src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/17163633390361201.png"
					mode="widthFix"></image>
				<view class="coupon">
					<view class="title1">恭喜获得惊喜福利</view>
					<view class="couponBigBox" v-if="couponlist.length > 0">
						<view class="conbox" v-for="(value, index) in couponlist" :key="index">
							<view class="contextbox">
								<text class="context_1">7</text>
								<text class="context_2">天</text>
							</view>
							<view>
								<view class="contitle_1">{{ value.Title }}</view>
								<view class="contitle_2">注册7天内有效</view>
							</view>
						</view>
					</view>
					<view class="btnBox">
						<view @click="couponstate" class="nicebtn">立即领取</view>
					</view>
				</view>
				<image @click="closecoupon" class="closeimg"
					src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1716364654294216.png" mode="widthFix">
				</image>
			</view>
		</view> -->
  </view>
</template>

<script>
import xScroll from "@/components/x-scroll/x-scroll.vue";
import topStatus from "@/components/topStatus/topStatus.vue";
import huiCell from "@/components/huiCell/huiCell.vue";
import { mapState } from 'vuex'
export default {
  components: {
    topStatus,
    xScroll,
    huiCell,
  },
  data() {
    return {
      isTech: -1, // 是否是教练
      auth: 1,
      isreceive: false, // 是否领取
      iscoupon: false, // 注册优惠卷弹窗
      couponlist: [],
      Samecity: "",
      isend: true,
      tabInd: 0, //tabId(0:发现,1:我的)
      tabList: [
        {
          title: "一起挥",
          key: 0,
        },
      ],
      user: {}, //个人信息
      load: false, //是否加载
      _freshing: true, //是否开启下拉刷新功能
      selectorVisible: false, //暂时没有用
      city: "", //当前城市
      siftList: [], //日期
      PageIndex: 1, //页码
      PageSize: 10, //请求条数
      list: [], //(发现/我的)列表数组
      Privatelist: [], // 私教
      studentlist: [], // 招学员
      oldList: [], //旧数组(暂时不知道干吗)
      isMore: true, //是否加载更多
      latitude: null, //纬度
      CompanyID: 6002, //公司Id
      SortField: "", //排序字段
      SortType: "", //排序类型
      ServerDate: null, //日期查询

      nav: [
        { ID: 1, Name: "最新" },
        { ID: 2, Name: "附近" },
      ],
      navIndex: 0,
      navType: "",

      //赛事
      party_list: [],
      isParty: true,
      //教练
      teacher_list: [],

      //教练课
      classes_list: [],
      isClass: true,

      ossPath: "",
      ossWatermark: '',
      bannerList: [
        //轮播图列表
        {
          ID: 1,
          Banner:
            "https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/171523386222866.png",
          forID: "banner1",
        },
      ],
      swiperHeight: 228, //轮播图高度
      fastNum: "0", //极速联系红点数字
      searchContent: "", //搜索内容
      SportTypeList: [], //运动
      showSearch: false,
      searchHeight: 0,//搜索box的高度
      showsign:1,//是否展示注册弹窗 0:展示，1:不展示
    };
  },
  watch: {
    //  tab标签发生变化
    tabInd(newVal) {
      this.init();
    },
  },
  async onShow() {
    this.iscoupon = uni.getStorageSync("iscoupon") || false;
    let that = this;
    uni.$on("getSelectCity", function (data) {
      if (data.name) {
        that.city = data.name || that.city;
      }
    });
    await this.getCity();
    // this.coupon();
    this.oldList = [];
    this.user = uni.getStorageSync("user");
    // this.sel_tab(this.navIndex)
    this.getFastNum();
    this.auth = uni.getStorageSync("user").IsAuth;
    this.showsign = this.auth
    if (this.auth == 1) {
      let res = await this.$api.post("Technicians/Get");
      if (res.code == 0) {
        if (res.data) {
          this.isTech = res.data.Status;
        }
      }
    }

    if (this.Refresh) {
      await this.init();
      this.$store.commit('changeRefresh', false)
    }
  },
  async onLoad(e) {
    this.isreceive = uni.getStorageSync("isreceive");
    if (e.pid) {
      uni.setStorageSync("pid", e.pid);
    }
    this.getSportType();
    // await this.getPageInfo()
    this.ossPath = this.$ossPath;
    this.ossWatermark = this.$ossWatermark
    //app注释
    await this.getCity();
    await this.init();
    this.GetBanner();
    if (await this.$store.getters.getLoginState) {
      // this.oldList = [];
      // await this.init();
    }
    uni.$on("send", () => {
      if (this.navIndex == 3 || this.navIndex == 4) {
        this.sel_tab(this.navIndex);
      }
    });
    this.getSearchHeight();
  },
  onUnload() {
    uni.$off("send");
  },
  methods: {
    gotobanner(item) {
      if (this.auth == 0) {
        this.nav_to('/pages/start/start2')
      } else {
        this.nav_to(item.GoUrl)
      }
    },
    // 切换筛选
    switchSport() {
      this.showSearch = !this.showSearch;
    },
    // 点击搜索
    subSearch() {
      this.list = [];
      this.PageIndex = 1;
      this.getList();
    },
    // 重置搜索
    resetSearch() {
      for (let i = 0; i < this.SportTypeList.length; i++) {
        this.SportTypeList[i].choose = false;
      }
      this.searchContent = "";
      this.subSearch();
    },
    // 获取运动标签
    async getSportType() {
      let res = await this.$api.post("Catalog/GetDictionary", {
        Type: "SportType",
      });
      if (res.data.length > 0) {
        let list = [];
        for (let i = 0; i < res.data.length; i++) {
          const { ID, Code } = res.data[i];
          let data = {
            code: Code,
            choose: false,
            id: ID,
          };
          list.push(data);
        }
        this.SportTypeList = list;

      }
    },
    // 选择运动标签
    chooseSport(index) {
      this.SportTypeList[index].choose = !this.SportTypeList[index].choose;
      this.subSearch();
    },
    // 获取搜索box高度
    getSearchHeight() {
      let that = this
      const query = uni.createSelectorQuery().in(this);
      query
        .select(".fakeBox")
        .boundingClientRect((data) => {
          if (data) {
            // data.height 是元素的高度
            that.searchHeight = data.height
            // console.log("元素高度：", data);
          }
        })
        .exec();
    },

    //过滤标签
    repdis(msg) {
      var msg = msg.replace(/<\/?[^>]*>/g, ""); //去除HTML Tag
      msg = msg.replace(/[|]*\n/, ""); //去除行尾空格
      msg = msg.replace(/&npsp;/gi, ""); //去掉npsp
      return msg;
    },
    async GetBanner() {
      let res = await this.$api.post("/Banner/GetBanner", {
        PageKey: "together-top",
      });
      if (res.code == 0) {
        if (res.data) {
          this.bannerList = res.data;
          console.log(res, 'res');
        }
      }
    },
    // 获取极速联系红点数
    getFastNum() {
      this.$api.post("Appointment/QuickDealUserNum").then((res) => {
        if (res.code == 0) {
          this.fastNum = res?.data > 99 ? "99+" : res?.data;
        } else {
          this.fastNum = 0;
        }
      });
    },
    //优惠卷弹窗状态
    couponstate() {
      // this.iscoupon = false
      this.isreceive = false;
      uni.setStorageSync("iscoupon", false);
      uni.setStorageSync("isreceive", this.isreceive);
      this.nav_to("/pages/court/mycoupon?tabInd=" + 0);
    },
    closecoupon() {
      this.iscoupon = false;
      this.isreceive = false;
      uni.setStorageSync("iscoupon", false);
      uni.setStorageSync("isreceive", true);
    },
    async coupon() {
      let res = await this.$api.post("Coupon/List", {
        CompanyID: 6003,
      });
      this.couponlist = res.data;
    },
    // 点击急速处理
    goMessage() {
      let auth = uni.getStorageSync("user").IsAuth;
      if (auth == 1) {
        this.nav_to("/pages/user/message/message");
      } else {
        this.nav_to("/pages/start/start2");
      }
    },
    onClickTab(index) {
      this.tabInd = index;
      this.PageIndex = 1;
      this.list = [];
      this.init();
    },
    // 获取页面配置信息
    async getPageInfo() {
      let res = await this.$api.post("Module/List", {
        Type: 2,
      });
      const { code, data, message } = res;
      if (code == 0) {
        this.nav = data || this.nav;
      }
    },
    whetherend(e) {
      if (e.detail.scrollLeft > 50) {
        this.isend = false;
      } else {
        this.isend = true;
      }
    },
    //去报名
    async subJoin(id, UserID) {
      let u = await this.$api.post("User/GetUserInfo", {
        ID: uni.getStorageSync("user").UserID,
      });

      this.user = u.data;
      if (this.user.UserID == UserID) {
        this.$pv.msg("不能参与自己创建的预约");
        return;
      }
      if (this.user.IsAuth == 0) {
        let _this = this;
        uni.showModal({
          title: "温馨提示",
          content: "未注册用户不能预约，请先注册账号",
          confirmText: "关闭",
          cancelText: "注册账号",
          success: function (res) {
            if (res.confirm) {
              uni.navigateBack({
                delta: 1,
              });
            } else if (res.cancel) {
              _this.nav_to("/pages/start/start2");
            }
          },
        });
      }

      if (this.user.IsAuth == 0) this.nav_to(`/pages/user/start2`);
      else this.nav_to(`/pages/ball/ball_join_confirm?id=${id}`);
    },
    sel_tab(index) {
      this.navIndex = index;
      // if (index == 0) {
      // 	this.navType = '推荐';
      // 	this.PageIndex = 1;
      // 	this.getList();
      // } else
      if (index == 0) {
        this.navType = "最新";
        this.list = [];
        this.PageIndex = 1;
        this.getList();
      } else if (index == 1) {
        this.navType = "同城";
        this.list = [];
        this.PageIndex = 1;
        this.getList();
      }

      // this.load = true;
    },
    async get_classlist() {
      let res = await this.$api.post("/Technicians/ClassList", {
        PageIndex: this.PageIndex,
        PageSize: this.PageSize,
      });
      if (this.PageIndex == 1) this.classes_list = res.data;
      else this.classes_list = this.classes_list.concat(this.classes_list);
      this.isClass =
        Array.isArray(res.data) && res.data.length >= this.PageSize;
      if (!this.classes_list) return;
      this.classes_list.forEach((item) => {
        if (!item.Images) return;
        item.Images = JSON.parse(item.Images);
      });
    },
    async get_partylist() {
      let res = await this.$api.post("/Action/List", {
        ActType: "赛事",
        PageIndex: this.PageIndex,
        PageSize: this.PageSize,
      });
      if (this.PageIndex == 1) this.party_list = res.data;
      else this.party_list = this.party_list.concat(this.party_list);
      this.isParty =
        Array.isArray(res.data) && res.data.length >= this.PageSize;
      // this.party_list.forEach(item=>{
      // 	if(!item.Banner) return;
      // 	item.Banner = JSON.parse(item.Banner)
      // })
    },
    async get_teacherlist() {
      let res = await this.$api.post("/Technicians/Recommend");

      this.teacher_list = res.data;
    },
    truncateString(str) {
      if (str.length > 10) {
        return str.substring(0, 10).concat("...");
      } else {
        return str;
      }
    },
    onShareAppMessage(res) {
      //发送给朋友
      let pid = uni.getStorageSync("user").UserID;
      let Name = this.$util.entitiesToUtf16(uni.getStorageSync("user").Name);
      return {
        title: `${Name}向您推荐了挥友圈，赶快来吧`,
        path: `/pages/tab/home?pid=${pid}`,
      };
    },
    setServerDate(e) {
      if (e) {
        this.ServerDate = e.date;
        this.list = [];
        this.oldList = [];
        this.init();
      } else {
        this.ServerDate = null;
        this.list = [];
        this.oldList = [];
        this.init();
      }
    },

    toSelectCity() {
      const hotCitys = "";
      uni.navigateTo({
        url: "/pages/city/cityList",
      });
    },
    // 获取定位
    getLocationSysc() {
      let _this = this;
      return new Promise((resolve, reject) => {
        uni.getLocation({
          type: "gcj02",
          success: function (res) {
            resolve(res);
          },
          fail: function (err) {
            const defaultLocation = {
              latitude: 0,
              longitude: 0,
            };
            resolve(defaultLocation);
          },
        });
      });
    },
    // 获取当前地址并解析
    async getCity() {
      let loc = await this.getLocationSysc();

      let longitude = loc.longitude;
      this.longitude = loc.longitude;
      let latitude = loc.latitude;
      this.latitude = loc.latitude;
      let o = {
        longitude,
        latitude,
      };
    },
    // 获取页面相关数据
    async init() {
      // 获取本地用户资料
      this.user = uni.getStorageSync("user");
      this.Samecity = this.user.City;
      //  获取列表数据
      await this.getList();
      // 取消加载中
      // this.load = true;
    },
    publish(index) {
      let _this = this;
      if (this.user.IsAuth == 0) {
        this.nav_to("/pages/start/start2");
      } else {
        if (index == 2) {
          if (this.isTech == -1) {
            uni.showModal({
              title: "温馨提示",
              content: "您还不是教练，请先认证",
              confirmText: "认证",
              success: function (res) {
                if (res.confirm) {
                  _this.nav_to("/pages/teacher/Settled");
                } else if (res.cancel) {
                }
              },
            });
          } else if (this.isTech == 0) {
            this.$pv.msg("正在审核中");
            // this.nav_to("/pages/ball/ball_add?golfType=" + index);
          } else {
            this.nav_to("/pages/ball/ball_add?golfType=" + index);
          }
        } else {
          this.nav_to("/pages/ball/ball_add?golfType=" + index);
        }
      }
    },
    async toUser(item) {
      this.ran_to_add_ball(`/pages/user/user_visitor?id=${item.UserID}`);
    },

    //  获取发现列表数据
    async getList() {
      // 当前tabID为发现请求数据
      if (this.tabInd == 0 || this.tabInd == 1 || this.tabInd == 2) {
        // this.$pv.load('加载中')
        let Appointment = "";
        if (this.tabInd == 0) {
          Appointment = "一起挥";
        } else if (this.tabInd == 1) {
          Appointment = "找私教";
        } else {
          Appointment = "招学员";
        }
        const PageKey = this.nav[this.navIndex].Name || "";
        this.SortField = this.navIndex == 0 ? "" : "Distance";
        let sporttype = [];
        for (let i = 0; i < this.SportTypeList.length; i++) {
          if (this.SportTypeList[i].choose) {
            sporttype.push(this.SportTypeList[i].code);
          }
        }
        let sporttypeJSON = sporttype.length > 0 ? sporttype.join(",") : "";
        // 参数对象
        let o = {
          PageIndex: this.PageIndex,
          PageSize: this.PageSize,
          // GolfType: this.navType,
          // City: this.navIndex == 1?this.Samecity:'',
          PageKey,
          User_Lng: this.longitude,
          User_Lat: this.latitude,
          ServerDate: this.ServerDate,
          SortField: this.SortField,
          SortType: this.SortType,
          AppointmentType: Appointment,
          Title: this.searchContent,
          PlaceType: sporttypeJSON,
        };
        //  当前日期为空清除ServerDate属性
        if (o.ServerDate == null) {
          delete o.ServerDate;
        }
        // 请求接口
        let res = await this.$api.post("Appointment/PageList", o);
        // this.$pv.closeLoad();
        if (res.code == 0) {
          //发现数组赋值
          if (this.PageIndex == 1) {
            this.list = res.data;
          } else {
            this.list = this.list.concat(res.data);
          }
          // 添加userIDList
          this.list.forEach((i) => {
            i.userIDList = i.Item.map((a) => a.UserID);
            i.PeopleCount = i.Item.filter((v) => v.Status >= 1);
            i.Remark = this.repdis(i.Remark);
          });
          // console.log(this.list);
          // 是否加载数据
          this.isMore =
            Array.isArray(res.data) && res.data.length >= this.PageSize;
          // 返回true
          this.load = true;
        }
        return true;
      }
    },

    //下拉刷新
    async onRefresh(index) {
      this.PageIndex = 1;
      if (index == 3) {
        await this.get_classlist();
      } else if (index == 4) {
        await this.get_partylist();
      } else {
        this.oldList = [];
        await this.getList();
      }
    },
    //滚动到底部触发
    async scrolltolower(index) {
      if (index == 3) {
        if (this.isClass) {
          this.PageIndex++;
          this.get_classlist();
        }
      } else if (index == 4) {
        if (this.isParty) {
          this.PageIndex++;
          this.get_partylist();
        }
      } else {
        if (this.isMore) {
          this.PageIndex++;
          this.getList();
        }
      }
    },
  },
  onUnload() {
    uni.$off("getSelectCity");
  },
  computed: {
    ...mapState(['Refresh']),
    formatDate() {
      return (date1, type) => {
        const date = new Date(date1);
        const month = date.getMonth() + 1;
        const day = date.getDate();
        const hours = date.getHours();
        const minutes = date.getMinutes();
        return type == 1
          ? `${month}/${day} ${String(hours).padStart(2, "0")}:${String(
            minutes
          ).padStart(2, "0")}`
          : `${String(hours).padStart(2, "0")}:${String(minutes).padStart(
            2,
            "0"
          )}`;
      };
    },
    getTime2() {
      return (l) => {
        let d = new Date(l);
        let timestamp = d.getTime();
        return this.$u.date(timestamp, "mm-dd");
      };
    },
  },
};
</script>

<style lang="scss">
.blank_space_view {
  // width: 100rpx;
  height: 300rpx;
}

page {
  background-color: #f6f6f6;
}

view {
  box-sizing: border-box;
}

.container {
  width: 100%;
}

.swiper {
  width: 100%;
  height: 228rpx;
}

.registerbox {
  width: 90%;
  height: 128rpx;
  background-color: rgba(0, 0, 0, 0.8);
  // opacity: 0.8;
  border-radius: 24rpx;
  // margin: ;
  position: absolute;
  bottom: 5%;
  left: 4%;
  display: flex;
  align-items: center;
  z-index: 2000;

  .regimg {
    width: 72rpx;
    height: 72rpx;
    margin: 0 16rpx 0 24rpx;
    border-radius: 50%;
  }

  .regtitle_1 {
    font-size: 28rpx;
    font-weight: 600;
    color: #fff;
    margin-bottom: 10rpx;
  }

  .regtitle_2 {
    font-size: 24rpx;
    color: #fff;
    opacity: 0.6;
  }

  .regbtn {
    width: 188rpx;
    height: 60rpx;
    border-radius: 32rpx;
    background-color: #706eee;
    font-size: 28rpx;
    color: #fff;
    text-align: center;
    line-height: 60rpx;
    margin-left: 56rpx;
  }
}

.couponbox {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.5);
  z-index: 100;

  .titleh1 {
    width: 344rpx;
    height: 232rpx;
    position: absolute;
    z-index: 2;
    top: -26%;
    left: 25%;
  }

  .couponBigBox {
    max-height: 300rpx;
    overflow: auto;
    margin-bottom: 30rpx;
  }

  .coupon {
    position: relative;
    width: 548rpx;
    // height: 610rpx;
    border-radius: 48rpx;
    // background-image: url('https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/17128894802161316.png');
    background: linear-gradient(180deg, #f8dfde 0%, #fdfdfd 100%);
    background-repeat: no-repeat;
    background-size: cover;
    margin: 0 auto;
    overflow: hidden;

    .title1 {
      width: 288rpx;
      height: 56rpx;
      border-radius: 0, 0, 20rpx, 20rpx;
      text-align: center;
      line-height: 56rpx;
      font-size: 32rpx;
      font-weight: 600;
      color: #3b1e06;
      margin: 0 auto;
      margin-top: 110rpx;
      margin-bottom: 20rpx;
    }

    .conbox {
      position: relative;
      background-image: url("https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1716363266841566.png");
      background-repeat: no-repeat;
      background-size: cover;
      width: 468rpx;
      height: 136rpx;
      display: flex;
      align-items: center;
      margin: 0 auto;
      // margin-bottom: 150rpx;

      .conimg {
        width: 96rpx;
        height: 96rpx;
      }

      .contextbox {
        width: 174rpx;
        text-align: center;
      }

      .context_1 {
        font-size: 48rpx;
        font-weight: 600;
        color: #ff3822;
      }

      .context_2 {
        font-size: 24rpx;
        font-weight: 500;
        color: #ff3822;
      }

      .contitle_1 {
        font-size: 28rpx;
        font-weight: 600;
        color: #710a03;
      }

      .contitle_2 {
        font-size: 22rpx;
        color: #fc3d3d;
      }

      .numbox {
        position: absolute;
        right: 0;
        top: 0;
        background-image: url("https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/17128897267561216.png");
        background-repeat: no-repeat;
        background-size: cover;
        width: 64rpx;
        height: 32rpx;
        font-size: 20rpx;
        font-weight: 600;
        color: #fff;
        text-align: center;
        line-height: 26rpx;
      }
    }

    .btnBox {
      width: 100%;
      height: 120rpx;

      .nicebtn {
        width: 452rpx;
        height: 88rpx;
        position: absolute;
        bottom: 30rpx;
        left: 54rpx;
        border-radius: 50rpx;
        // margin: 0 auto;
        // margin-top: 54rpx;
        background-color: #ef4034;
        text-align: center;
        line-height: 88rpx;
        font-size: 32rpx;
        font-weight: 600;
        color: #fff;
      }
    }
  }

  .closeimg {
    width: 32rpx;
    height: 32rpx;
    position: absolute;
    right: 14%;
    top: 6%;
  }
}

.topBox {
  width: 100%;
  padding: 0 30rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;

  .topFastBtn {
    padding: 13rpx 24rpx;
    background: #706eee;
    border-radius: 32rpx;
    font-weight: 500;
    font-size: 24rpx;
    color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;

    image {
      width: 24rpx;
      height: 24rpx;
    }

    .topFastText {
      font-size: 24rpx;
      color: #ffffff;
    }

    .topFastNum {
      position: absolute;
      top: -16rpx;
      right: -10rpx;
      width: 40rpx;
      background-color: red;
      color: #fff;
      border-radius: 50%;
      text-align: center;
      display: flex;
      justify-content: center;
      align-items: center;
      aspect-ratio: 1/1;
      font-size: 20rpx;
    }
  }
}

.screenBox {
  position: absolute;
  left: 0;
  bottom: 1rpx;
  transform: translateY(100%);
  width: 100%;
  background: white;
  padding: 0 30rpx;
  overflow: hidden;
  transition: 0.8s all;

  .searchCell {
    width: 100%;
    display: flex;
    align-items: center;
    margin-top: 20rpx;

    .scIcon {
      margin-right: 16rpx;
    }

    .scInp {
      width: 380rpx;
      background: #f2f2f2;
      border-radius: 100rpx;
      padding: 10rpx 30rpx;

      >input {
        width: 100%;
        background: transparent;
      }
    }

    .scBtnBox {
      display: flex;
      margin-left: auto;

      .scSumBtn {
        padding: 13rpx 24rpx;
        background: #706eee;
        border-radius: 32rpx;
        font-weight: 500;
        font-size: 24rpx;
        color: #ffffff;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;

        &:last-child {
          margin-left: 20rpx;
        }
      }
    }
  }

  .tagBox {
    width: 100%;
    // overflow-y: auto;
    margin-top: 20rpx;
    padding-bottom: 20rpx;

    .tagList {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      width: 100%;

      .tagCell {
        padding: 10rpx 20rpx;
        border-radius: 12rpx;
        border: 2rpx solid #706eee;
        background: white;
        color: #706eee;
        margin: 0 20rpx 10rpx;
        margin-left: 0;
        white-space: nowrap;
        font-size: 22rpx;
      }

      .tagIng {
        border: 2rpx solid #706eee;
        background: #706eee;
        color: white;
      }
    }
  }
}

.fakeBox {
  left: 0;
  bottom: 100%;
  transform: translateY(-100%);
  opacity: 0;
}

.bannerImageBox {
  width: 100%;
  padding: 24rpx 0;

  .adverimg {
    width: 702rpx;
    height: 180rpx;
    display: block;
    margin: 0 auto;
  }
}

.home {
  position: relative;
  height: 100vh;
  overflow: hidden;
}

.puadd {
  width: 120rpx;
  height: 56rpx;
  border-radius: 32rpx;
  background-color: #706eee;
  display: flex;
  justify-content: center;
  align-items: center;

  .putitle {
    color: #fff;
    font-size: 24rpx;
    font-weight: 400;
  }

  .releaseimg {
    width: 24rpx;
    height: 24rpx;
  }
}

.null {
  width: 100%;
  height: 20vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nav_ {
  display: flex;
  align-items: center;
  z-index: 999;
  position: sticky;
  top: 0;
  background: #fff;
  position: relative;
  // padding-left: 32rpx;
  box-sizing: border-box;
}

.nav_item {
  width: 96rpx;
  height: 48rpx;
  border-radius: 24rpx;
  background-color: #f5f5f5;
  text-align: center;
  line-height: 48rpx;
  margin-right: 20rpx;
}

.nav_text {
  font-size: 24rpx;
  color: #999999;
}

.nav_active {
  font-size: 28rpx;
  color: #333333;
  font-weight: bold;
  position: relative;

  // &:after {
  // 	content: '';
  // 	width: 30%;
  // 	height: 8rpx;
  // 	border-radius: 16rpx;
  // 	background-color: #333333;
  // 	position: absolute;
  // 	left: 50%;
  // 	bottom: 4rpx;
  // 	transform: translate(-50%, -50%);
  // }
}

.card {
  .listBox {
    padding: 0 24rpx;
  }

  .tit_ {
    margin-bottom: 20rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #333333;
    font-size: 32rpx;
    font-weight: 600;

    .tit_teacher {
      color: #333333;
      font-size: 32rpx;
      font-weight: 600;
    }

    .lit {
      display: flex;
      align-items: center;
      font-size: 24rpx;
      color: #333333;
    }
  }

  .scroll_wrap {
    white-space: nowrap;
    margin-bottom: 30rpx;

    .scroll_item {
      display: flex;
      position: relative;
      margin: 0 28rpx;
    }

    .nav_card {
      border-radius: 16rpx;
      margin-right: 30rpx;

      image {
        width: 110rpx;
        height: 110rpx;
        border-radius: 50%;
      }

      .navcard_info {
        display: flex;
        flex-direction: column;
        justify-content: space-around;

        .name {
          color: #333333;
          text-align: center;
          font-size: 28rpx;
          margin: 10rpx 0;
        }

        .lit {
          font-size: 26rpx;
          width: 100%;
        }
      }
    }

    .nav_card:last-child {
      margin-right: 0;
    }

    .more {
      position: absolute;
      width: 40rpx;
      height: 92%;
      right: -36rpx;
      top: 0;
      display: flex;
      font-size: 26rpx;
      justify-content: center;
      box-sizing: border-box;
      background-color: #ffffff;
      display: flex;
      align-items: center;
      justify-content: center;

      image {
        width: 30rpx;
        height: 30rpx;
      }
    }
  }

  .teacherbox {
    width: 652rpx;
    height: 332rpx;
    background-color: #fff;
    margin: 24rpx 32rpx 24rpx 32rpx;
    position: relative;
    border-radius: 24rpx;
    padding: 24rpx 20rpx 24rpx 208rpx;
    box-sizing: border-box;

    .teacherimg {
      position: absolute;
      top: 24rpx;
      left: -32rpx;
      width: 220rpx;
      height: 284rpx;
      border-radius: 16rpx;
    }

    .contbox {
      .title {
        font-size: 36rpx;
        color: #333333;
        font-weight: 600;
        margin-bottom: 10rpx;
      }

      .technicianName {
        color: #d4a553;
        font-size: 24rpx;
        margin-bottom: 38rpx;
      }

      .tetimebox {
        display: flex;
        align-items: center;

        .tetimeimg {
          width: 20rpx;
          height: 20rpx;
          margin-right: 10rpx;
        }

        .tetime {
          font-size: 22rpx;
          color: #999999;
        }
      }

      .teaddrebox {
        display: flex;
        align-items: center;
        margin-bottom: 20rpx;

        .teaddreimg {
          width: 20rpx;
          height: 20rpx;
          margin-right: 10rpx;
        }

        .teplace {
          width: 308rpx;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          font-size: 22rpx;
          color: #999999;
        }

        .tedis {
          font-size: 22rpx;
          color: #999999;
        }
      }

      .poplebox {
        height: 60rpx;
        display: flex;
        border-radius: 29rpx;
        align-items: center;
        background: linear-gradient(90deg, #fff 0%, #f6f6f6 100%);
        position: relative;

        .polist {
          width: 108rpx;
          display: flex;
          margin-right: 5rpx;

          .poimg {
            width: 36rpx;
            height: 36rpx;
            border-radius: 50%;
            margin-left: -14rpx;
          }

          .poimg:first-child {
            margin-left: 0;
          }
        }

        .memberbox {
          display: flex;

          .member {
            font-size: 22rpx;
            color: #d4a553;
          }

          .sum {
            font-size: 22rpx;
            color: #999999;
          }
        }

        .baom {
          margin-left: 8rpx;
          font-size: 22rpx;
          color: #d4a553;
        }

        .tiy {
          position: absolute;
          right: 0;
          width: 112rpx;
          height: 64rpx;
          background-color: #0d0d0d;
          font-size: 24rpx;
          text-align: center;
          line-height: 64rpx;
          color: #fff;
          border-radius: 31rpx;
        }
      }
    }
  }

  .card_item {
    width: 652rpx;
    height: 332rpx;
    background-color: #fff;
    margin: 18rpx 41rpx;

    .conbox {
      width: 652rpx;
      height: 332rpx;
      position: relative;
      // border-radius: 24rpx;
      border-radius: 0 24rpx 24rpx 0;
      box-sizing: border-box;
      padding: 18rpx 0;

      .bannerimg {
        width: 222rpx;
        height: 284rpx;
        position: absolute;
        top: 24rpx;
        left: -38rpx;
        z-index: 1000;
        border-radius: 16rpx;
      }

      .textbox {
        width: 432rpx;
        margin: 0 203rpx;

        .destext {
          font-size: 32rpx;
          color: #333333;
          margin-bottom: 50rpx;
          margin-right: 20rpx;
        }

        .destimebox {
          display: flex;
          margin-bottom: 10rpx;

          .destimeimg {
            width: 20rpx;
            height: 20rpx;
            margin-right: 10rpx;
          }

          .destetime {
            font-size: 22rpx;
            color: #999999;
          }
        }

        .desadderbox {
          display: flex;
          margin-bottom: 10rpx;

          .desaddimg {
            width: 18rpx;
            height: 22rpx;
            margin-right: 10rpx;
          }

          .desadd {
            font-size: 22rpx;
            color: #999999;
          }
        }
      }

      .comimgbox {
        display: flex;
        align-items: center;
        width: 432rpx;
        margin: 0 205rpx;

        .communbox {
          display: flex;
          margin-right: 13rpx;

          .communbox .comimg:first-child {
            margin-left: 0;
          }

          .comimg {
            width: 36rpx;
            height: 36rpx;
            border-radius: 50%;
            margin-left: -12rpx;
          }
        }
      }

      .peplength {
        font-size: 22rpx;
        color: #d4a553;
      }

      .limit {
        font-size: 22rpx;
        color: #999999;
        margin-right: 10rpx;
      }

      .com {
        font-size: 22rpx;
        color: #d4a553;
      }

      .gotocom {
        width: 112rpx;
        height: 64rpx;
        border-radius: 31rpx;
        background-color: #0d0d0d;
        font-size: 24rpx;
        text-align: center;
        line-height: 64rpx;
        margin-left: 46rpx;
        color: #fff;
      }
    }
  }
}

.fix {
  position: relative;
  background-color: #fff;
  width: 750rpx;
  top: 0;
  left: 0;
  z-index: 999;
  padding-bottom: 15rpx;

  .endimg {
    width: 32rpx;
    height: 32rpx;
    position: absolute;
    z-index: 1000;
    right: 150rpx;
    bottom: 28rpx;
  }
}

.tabs {
  box-sizing: border-box;
  z-index: 200;
  height: 44px;
  width: 750rpx;
  display: flex;
  align-items: center;
  background: #fff;
  margin-bottom: 20rpx;

  .city {
    height: 60rpx;
    // width: 140rpx;
    width: 160rpx;
    margin-right: 6rpx;
    display: flex;
    align-items: center;

    .hlogo {
      //   width: 136rpx;
      //   height: 60rpx;
      width: 48rpx;
      height: 48rpx;
    }

    .link-1 {
      max-width: 96rpx;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      -o-text-overflow: ellipsis;

      .linkcity {
        color: #333333;
      }
    }
  }

  .img2 {
    height: 36rpx;
    width: 36rpx;
    margin-right: 266rpx;

    .zuju {
      color: #333333;
      font-size: 36rpx;
    }
  }

  .tab1,
  .tab2 {
    font-size: 32rpx;
    font-weight: 500;
    margin-right: 30rpx;
    line-height: 44px;
    color: #666666;
  }
    .tab1{
        margin-left: 126rpx;
    }
  .tab4 {
    font-size: 36rpx;
    font-weight: bold;
    color: #333333;
    position: relative;
  }

  .aft4 {
    width: 64rpx;
    height: 10rpx;
    border-radius: 6rpx;
    background: linear-gradient(180deg, #a9a7f8 0%, #9796ed 100%);
    position: absolute;
    bottom: 8rpx;
    left: 50%;
    transform: translateX(-50%);
  }
}

.ball-create-wrap {
  position: absolute;
  left: 0;
  bottom: 32rpx;
  width: 100%;
  display: flex;
  justify-content: center;
}

.ball-card-wrap {
  padding-bottom: 120rpx;

  view,
  text,
  .ball-time,
  .ball-address {
    color: white;
  }

  color: white;

  .ball-card {
    padding: 100rpx 60rpx 60rpx 60rpx;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
    margin: 18rpx 0;

    .ball-type {
      font-size: 26rpx;
      color: #ffdf9f;
      border-radius: 4rpx;
      padding: 6rpx 15rpx;
      position: absolute;
      top: 50rpx;
      right: 0;
    }

    .ball-text {
      color: white;
    }

    .ball-desc {
      position: relative;

      >view {
        margin: 18rpx 0;
      }
    }
  }

  .ball-card:before {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.6);
  }
}

.home {
  .top {
    position: sticky;
    top: 0;
    z-index: 999;
    background: #1f1f1f;

    .nav {
      height: 44px;
      line-height: 44px;
    }
  }

  .list {
    .item {
      margin-top: 20rpx;
      background: #202020;
      border-radius: 16rpx;
      overflow: hidden;
      padding-bottom: 20rpx;

      .item_hd {
        background: #262626;
        padding-left: 20rpx;
        padding-right: 20rpx;
        display: flex;
        justify-content: space-between;
        height: 100rpx;
        align-items: center;

        .cover {
          height: 72rpx;
          width: 72rpx;
          border: 1px solid #7b7b7b;
          border-radius: 50%;
          overflow: hidden;

          image {
            height: 100%;
            width: 100%;
          }
        }
      }

      .item_bd {
        padding-left: 24rpx;
        padding-right: 24rpx;
        padding-top: 20rpx;
        padding-bottom: 20rpx;

        .lin {
          line-height: 50rpx;
        }

        .imgbox_sm {
          height: 40rpx;
          width: 40rpx;
          display: inline-block;
          vertical-align: middle;
          margin-right: 6rpx;
          font-size: 0;
          margin-left: 6rpx;

          image {
            height: 100%;
            width: 100%;
          }
        }
      }

      .item_ft {
        margin-left: 20rpx;
        margin-right: 20rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-radius: 100rpx;
        background: #262626;

        .cover_group {
          display: flex;
        }

        .cover {
          margin-right: -15rpx;
          height: 48rpx;
          width: 48rpx;
          border-radius: 48rpx;
          border: 1px solid #7b7b7b;
          overflow: hidden;

          image {
            height: 100%;
            width: 100%;
          }

          &:last-child {
            margin-right: 0;
          }
        }

        .nums {
          line-height: 28 * 2rpx;
          margin-left: 16rpx;
        }

        .tip {
          margin-left: 16rpx;
        }
      }

      .left {
        display: flex;
        align-items: center;
      }
    }
  }
}
</style>
